<template>
  <view class="coupon-layout">
    <van-tabs v-model:active="activeTab" :line-width="20" :line-height="4" color="#1a1617">
      <van-tab title="可用">
        <view class="coupon-list">
          <view class="coupon-item" v-for="coupon in availableCoupons" :key="coupon.id">
            <view class="coupon-content">
              <view class="coupon-left">
                <view class="coupon-price">
                  <text class="symbol">¥</text>
                  <text class="price">{{ coupon.amount }}</text>
                </view>
                <view class="coupon-condition">{{ coupon.condition }}</view>
              </view>
              <view class="coupon-right">
                <view class="coupon-title">{{ coupon.title }}</view>
                <view class="coupon-time">有效期至：{{ coupon.expiryDate }}</view>
              </view>
            </view>
          </view>
        </view>
      </van-tab>
      <van-tab title="已使用">
        <view class="coupon-list">
          <view class="coupon-item used" v-for="coupon in usedCoupons" :key="coupon.id">
            <view class="coupon-content">
              <view class="coupon-left">
                <view class="coupon-price">
                  <text class="symbol">¥</text>
                  <text class="price">{{ coupon.amount }}</text>
                </view>
                <view class="coupon-condition">{{ coupon.condition }}</view>
              </view>
              <view class="coupon-right">
                <view class="coupon-title">{{ coupon.title }}</view>
                <view class="coupon-time">有效期至：{{ coupon.expiryDate }}</view>
              </view>
            </view>
          </view>
        </view>
      </van-tab>
      <van-tab title="已过期">
        <view class="coupon-list">
          <view class="coupon-item expired" v-for="coupon in expiredCoupons" :key="coupon.id">
            <view class="coupon-content">
              <view class="coupon-left">
                <view class="coupon-price">
                  <text class="symbol">¥</text>
                  <text class="price">{{ coupon.amount }}</text>
                </view>
                <view class="coupon-condition">{{ coupon.condition }}</view>
              </view>
              <view class="coupon-right">
                <view class="coupon-title">{{ coupon.title }}</view>
                <view class="coupon-time">有效期至：{{ coupon.expiryDate }}</view>
              </view>
            </view>
          </view>
        </view>
      </van-tab>
    </van-tabs>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref(0);

const availableCoupons = ref([
  {
    id: 1,
    amount: 10,
    condition: '满50元可用',
    title: '新人优惠券',
    expiryDate: '2023-12-31'
  },
  {
    id: 2,
    amount: 20,
    condition: '满100元可用',
    title: '节日优惠券',
    expiryDate: '2023-11-30'
  }
]);

const usedCoupons = ref([
  {
    id: 3,
    amount: 15,
    condition: '满80元可用',
    title: '生日优惠券',
    expiryDate: '2023-10-15'
  }
]);

const expiredCoupons = ref([
  {
    id: 4,
    amount: 5,
    condition: '满30元可用',
    title: '早鸟优惠券',
    expiryDate: '2023-09-30'
  }
]);
</script>

<style scoped lang="scss">
.coupon-layout {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .coupon-list {
    padding: 20rpx;
    
    .coupon-item {
      background-color: #fff;
      border-radius: 15rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

      &.used {
        background-color: #f2f3f5;
      }

      &.expired {
        background-color: #f0f0f0;
      }

      .coupon-content {
        display: flex;

        .coupon-left {
          width: 200rpx;
          text-align: center;
          border-right: 1px dashed #ccc;

          .coupon-price {
            font-size: 40rpx;
            font-weight: bold;
            color: #1a1617;

            .symbol {
              font-size: 24rpx;
            }
          }

          .coupon-condition {
            font-size: 24rpx;
            color: #666;
          }
        }

        .coupon-right {
          flex: 1;
          padding-left: 30rpx;

          .coupon-title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
          }

          .coupon-time {
            font-size: 24rpx;
            color: #999;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
</style>